/**
 * Created by Ysssssss on 2021/5/12.
 */

import React, { PureComponent } from 'react'
import { Modal } from "antd";
import PageBackHeader from "@common/PageBackHeader";
import {connect} from "react-redux";
import {
    copySupplyGroup,
    getSupplyGroupList,
    deleteSupplyGroup,
    setSupplyGroupRelatedStores
} from "@sagas/productCenter";
import {MultiSelectStoreModal} from "@common/presentational/MultiSelectModal";
import {CreateSupplyGroupModal, EditSupplyGroupModal} from "@components/productCenter/modal/SupplyGroupModal";
import {withRouter} from "react-router-dom";
import DropdownMenu from "@common/presentational/DropdownMenu";
import BilinIcon from "@common/presentational/BilinIcon";

@connect(({ productCenter }) => ({
    supplyGroupList: productCenter.supplyGroupList
}), {
    copySupplyGroup,
    getSupplyGroupList,
    deleteSupplyGroup,
    setSupplyGroupRelatedStores,
})
@withRouter
class SupplyGroupPage extends PureComponent {
    constructor(props) {
        super(props);

        this.multiSelectModalRef = React.createRef()
        this.createSupplyGroupModalRef = React.createRef()
        this.editSupplyGroupModalRef = React.createRef()
    }

    componentDidMount() {
        this.getSupplyGroupList()
    }

    getSupplyGroupList () {
        this.props.getSupplyGroupList()
    }

    createSupplyGroup () {
        this.createSupplyGroupModalRef.current?.show()
    }

    handleOperationClick (supplyGroup, type) {
        switch(type) {
            case 'store':
                this.multiSelectModalRef.current?.show({
                    initSelectedStores: supplyGroup.stores.map(store => ({ store_id: store.id, store_name: store.name })),
                    id: supplyGroup.id
                })
                break;
            case 'copy':
                Modal.confirm({
                    title: `是否确认复制供货组（${supplyGroup.name}）`,
                    icon: null,
                    onOk: () => {
                        this.props.copySupplyGroup({
                            id: supplyGroup.id
                        }, () => {
                            this.getSupplyGroupList()
                        })
                    }
                })
                break;
            case 'edit':
                this.editSupplyGroupModalRef.current?.show({ id: supplyGroup.id })
                break;
            case 'delete':
                supplyGroup.stores.length ? (
                    Modal.info({
                        title: `已应用于店铺，需先解除店铺关联关系后才能删除`,
                        icon: null,
                    })
                ) : (
                    Modal.confirm({
                        title: `是否确认删除供货组（${supplyGroup.name}）`,
                        icon: null,
                        onOk: () => {
                            this.props.deleteSupplyGroup({
                                id: supplyGroup.id
                            }, () => {
                                this.getSupplyGroupList()
                            })
                        }
                    })
                )
                break;
            default:
                break;
        }
    }

    handleStoreChange (stores, params) {
        this.props.setSupplyGroupRelatedStores({
            id: params.id,
            storeIds: stores.map(store => store.store_id)
        }, () => {
            this.getSupplyGroupList()
        })
    }

    goDetailPage (id) {
        this.props.history.push(`/product-center/supply-group/${id}/detail`)
    }

    render () {
        const { supplyGroupList } = this.props
        return (
            <div className="bilin-web">
                <PageBackHeader title="供货中心" backUrl="/product-center/type"/>
                <div className="bilin-web-body supply-group-page">
                    <div className="supply-group-list">
                        { supplyGroupList.map(supplyGroup => (
                            <div className="supply-group-item">
                                <div className="supply-group-image cur-poi" onClick={this.goDetailPage.bind(this,supplyGroup.id)}>
                                    { supplyGroup.pic ? (<img src={supplyGroup.pic} alt=""/>) : supplyGroup.name }
                                </div>
                                <div className="supply-group-name cur-poi" onClick={this.goDetailPage.bind(this,supplyGroup.id)}>
                                    <span>{ supplyGroup.name }</span>
                                    <span className="ft-clr-ml">（{ supplyGroup.prod_count }）</span>
                                </div>
                                <DropdownMenu
                                    dropdownList={[{
                                        key: 'store',
                                        name: '应用',
                                    }, {
                                        key: 'copy',
                                        name: '复制'
                                    }, {
                                        key: 'edit',
                                        name: '设置'
                                    }, {
                                        key: 'delete',
                                        name: '删除'
                                    }]}
                                    onClick={this.handleOperationClick.bind(this, supplyGroup)}
                                    trigger={['click']}
                                >
                                    <BilinIcon type="more-dropdown" className="supply-group-operation"/>
                                </DropdownMenu>
                            </div>
                        )) }
                        <div className="supply-group-create" onClick={this.createSupplyGroup.bind(this)}>
                            <BilinIcon type="plus" className="ft-16 ft-clr-md"/>
                            <div className="ft-16 ft-clr-md mgl-8">新建供货组</div>
                        </div>
                    </div>
                </div>
                <MultiSelectStoreModal
                    ref={this.multiSelectModalRef}
                    title="应用店铺"
                    onChange={this.handleStoreChange.bind(this)}
                />
                <CreateSupplyGroupModal ref={this.createSupplyGroupModalRef} callback={this.getSupplyGroupList.bind(this)}/>
                <EditSupplyGroupModal ref={this.editSupplyGroupModalRef} callback={this.getSupplyGroupList.bind(this)}/>
            </div>
        )
    }
}

export default SupplyGroupPage